<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link rel="stylesheet" href="./">
        <title></title>
        
    </head>
    <body>
        <div id="app">
           <p>{{text}}</p>
           <!-- 模板只能使用Vue中数据 -->
           <button @click="text += text">update</button>
           <button @click="$destroy()">destroyed</button>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            
            const vm = new Vue({
                data:{
                    text:"abc",
                },
                /*
                    mounted 初始化渲染完成之后触发
                    发送请求、设置定时器、绑定事件等异步任务
                        1. mounted可以直接操作DOM
                        2. mounted执行任务，不会阻塞渲染（让渲染速度更快）
                    beforeDestroy 再销毁之前触发
                    清除定时器，解绑事件等收尾工作 -> 防止内存泄漏
                */
                // 生命周期函数
                // 初始化渲染阶段 第一次渲染触发
                beforeCreate(){
                    console.log("beforeCreate()");
                },
                created(){
                    console.log("created()");
                },
                beforeMount(){
                    console.log("beforeMount()");
                },
                mounted(){
                    console.log("mounted()");
                },
                // 数据更新阶段 一旦数据变化就触发
                beforeUpdate(){
                    console.log("beforeUpdate()");
                },
                updated(){
                    console.log("updated()");
                },
                // 卸载阶段 -> 手动销毁 vm.$destroy()
                beforeDestroy(){
                    console.log("beforeDestroy()");
                },
                destroyed(){
                    console.log("destroyed()");
                }
            });
            vm.$mount("#app");
        </script>
    </body>
</html>